<template>
  <div class="container">
  <h3>翻转世界</h3>
  <h1>{{ message }}</h1>
  <input type="button" value="逆转世界" v-on:click="handleUpdateMessage">
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    const message = ref('Hello, World')

    // 定义数据处理函数
    const handleUpdateMessage = () => {
      // 取反字符串
      message.value = message.value.split('').reverse().join('')
    }

    return {
      message,
      handleUpdateMessage
    }
  }
}
</script>

<style>
.container {
  width: 450px;
  border: 1px solid #000;
  padding: 10px;
}
</style>